<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>统计信息</title>
    <link type="favicon" rel="shortcut icon" href="./static/img/favicon.ico" />
    <link rel="stylesheet" href="./static/css/bootstrap.css">
    <link rel="stylesheet" href="./static/css/init.css">
    <link rel="stylesheet" href="./static/less/common.css">
    <link rel="stylesheet" href="./static/less/statistical.css">
    <link rel="stylesheet" href="./static/css/charts.css">
    <link rel="stylesheet" href="./static/css/chartist/chartist.min.css">
    <link href="./static/css/spop.min.css" rel="stylesheet"/>
    <script src="./static/js/Syunew6.js"></script>
    <script src="./static/js/isLogin.js"></script>
</head>
<body>
    <div id="statistical" class="statistical-box common-box" @mousemove="getMouse">
        <div class="head-box">
            <div class="logo-box">
                <img class="logo" src="./static/img/logo_1.png" alt="">
                <span class="title">成都杜甫草堂博物馆综合信息管理平台</span>
            </div>
            <div class="user-box">
                <div class="name">{{userData.userName}}，欢迎您</div>
                <div class="logout">
                    <span @click="logout" class="cus">
                        <i class="glyphicon glyphicon-log-out"></i>
                        <span>登出</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="address-box">
                <div class="address">
                    <a class="href" href="/index.html">首页</a>
                    <i class="glyphicon glyphicon-menu-right right"></i>
                    <span>统计分析</span>
                </div>
                <div class="time">
                    {{date + '&nbsp;星期' + week + '&nbsp;' + time}}
                </div>
            </div>

            <!-- tab大屏 -->
            <div class="tab">
                <p class="title" :class="tabCurrent == 1 ? '' : 'cus'" @click="tabClick(1)" v-if="menuConfig('图表展示')">图表展示</p>
                <p class="title" :class="tabCurrent == 2 ? '' : 'cus'" @click="tabClick(2)" v-if="menuConfig('监控展示')">监控展示</p>
            </div>
            <!-- tab小屏 -->
            <!-- <div class="container tab2">
                <div class="navbar-header">
                    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="true">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand">{{tabs[tabCurrent]}}</a>
                </div>
                <nav id="bs-navbar" class="navbar-collapse collapse in" aria-expanded="true">
                    <ul class="nav navbar-nav">
                        <li v-if="menuConfig('图表展示')">
                            <a :class="tabCurrent == 1 ? 'current' : ''" @click="tabClick(1)">图表展示</a>
                        </li>
                        <li v-if="menuConfig('监控展示')">
                            <a :class="tabCurrent == 2 ? 'current' : ''" @click="tabClick(2)">监控展示</a>
                        </li>
                    </ul>
                </nav>
            </div> -->

            <div class="big-box"  v-show="tabCurrent == 1">
                <!-- 综合统计 -->
                <div class="number-box" v-if="menuConfig('入园统计')">
                    <div class="one">
                        <div class="title">
                            进园人数
                            <div class="tag">今日</div>
                        </div>
                        <div class="number">
                            11,325
                        </div>
                        <div class="tips">
                            截止当前进园人数汇总
                        </div>
                    </div>
                    <div class="one">
                        <div class="title">
                            讲解批次
                            <div class="tag">今日</div>
                        </div>
                        <div class="number">
                            {{toDayData.commentatorNum}}
                        </div>
                        <div class="tips">
                            截止当前讲解批次汇总
                        </div>
                    </div>
                    <div class="one">
                        <div class="title">
                            讲解服务人数
                            <div class="tag">今日</div>
                        </div>
                        <div class="number">
                            {{toDayData.serviceNum}}
                        </div>
                        <div class="tips">
                            截止当前讲解服务游客人数汇总
                        </div>
                    </div>
                    <div class="one">
                        <div class="title">
                            停车总数
                            <div class="tag">今日</div>
                        </div>
                        <div class="number">
                            1,021
                        </div>
                        <div class="tips">
                            截止当前停车数汇总
                        </div>
                    </div>
                </div>
                <!-- 票务统计 -->
                <div class="charts-box row"  v-if="menuConfig('票务统计图表')">
                    <div class="col-lg-12">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>票务统计</h5>
                                <div class="pull-right">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-xs btn-white" :class="tickType === 1 ? 'active' : ''" @click="ticketInit(1)">天</button>
                                        <button type="button" class="btn btn-xs btn-white" :class="tickType === 2 ? 'active' : ''" @click="ticketInit(2)">月</button>
                                        <button type="button" class="btn btn-xs btn-white" :class="tickType === 3 ? 'active' : ''" @click="ticketInit(3)">年</button>
                                    </div>
                                    <div class="time-group" :class="tickType === 1 ? 'u_show' : ''">
                                        日期：
                                        <select>
                                            <option v-for="(item,i) in years" :key="i" :selected="item == '2018'">{{item}}年</option>
                                        </select>
                                        <select>
                                            <option v-for="i in 12" :key="i">{{i}}月</option>
                                        </select>
                                    </div>
                                    <div class="time-group" :class="tickType === 2 ? 'u_show' : ''">
                                        日期：
                                        <select>
                                            <option v-for="(item,i) in years" :key="i" :selected="item == '2018'">{{item}}年</option>
                                            
                                        </select>
                                    </div>
                                    <div class="time-group" :class="tickType === 3 ? 'u_show' : ''">
                                        日期：
                                        <select>
                                            <option v-for="(item,i) in years" :key="i">{{item}}年</option>
                                        </select>
                                        ~
                                        <select>
                                            <option v-for="(item,i) in years" :key="i">{{item}}年</option>
                                            
                                        </select>
                                    </div>
                                    <div class="btn-group">
                                        <!-- <button type="button" class="btn btn-xs btn-white" title="搜索">
                                            <i class="glyphicon glyphicon-search cus"></i>
                                        </button> -->
                                        <button type="button" class="btn btn-xs btn-white" title="导出数据" @click="导出表格(1)">
                                            <i class="glyphicon glyphicon-floppy-save"></i>
                                        </button>
                                    </div>
                                </div>
                                
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-lg-9">
                                        <div class="flot-chart">
                                            <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <ul class="stat-list">
                                            <li>
                                                <h2 class="no-margins">520</h2>
                                                <small>今日激活数</small>
                                                <div class="stat-percent">48% <i class="fa fa-level-up text-navy"></i></div>
                                                <div class="progress progress-mini">
                                                    <div style="width: 48%;" class="progress-bar"></div>
                                                </div>
                                            </li>
                                            <li>
                                                <h2 class="no-margins ">1,422</h2>
                                                <small>本月激活数</small>
                                                <div class="stat-percent">60% <i class="fa fa-level-down text-navy"></i></div>
                                                <div class="progress progress-mini">
                                                    <div style="width: 60%;" class="progress-bar"></div>
                                                </div>
                                            </li>
                                            <li>
                                                <h2 class="no-margins ">9,180</h2>
                                                <small>当年激活数</small>
                                                <div class="stat-percent">22% <i class="fa fa-bolt text-navy"></i></div>
                                                <div class="progress progress-mini">
                                                    <div style="width: 22%;" class="progress-bar"></div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="display: none">
                            <table id="table1">
                                <thead>
                                    <tr>
                                        <th>日期</th>
                                        <th>核销数</th>
                                        <th>激活数</th>
                                    </tr>
                                    <tbody>
                                        <tr v-for="(item,i) in tickTableData.activationData">
                                            <td class="active" v-if="tickType == 1">{{timeFormat('yyyy年MM月dd日',item[0])}}</td>
                                            <td class="active" v-if="tickType == 2">{{timeFormat('yyyy年MM月',item[0])}}</td>
                                            <td class="active" v-if="tickType == 3">{{timeFormat('yyyy年',item[0])}}</td>
                                            <td class="success">{{tickTableData.soldData[i][1]}}</td>
                                            <td class="warning">{{tickTableData.activationData[i][1]}}</td>
                                        </tr>
                                    </tbody>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- 讲解员统计 -->
                <div class="charts-box row" v-if="menuConfig('讲解员统计图表')">
                    <div class="col-lg-12">
                        <div class="ibox float-e-margins">
                            <div class="loading-box" v-show="narratorLoading">
                                <img src="static/img/loading.gif" alt="">
                            </div>
                            <div class="ibox-title">
                                <h5>讲解员统计</h5>
                                <div class="pull-right">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-xs btn-white" :class="narratorType === 1 ? 'active' : ''" @click="narratorInit(1)">天</button>
                                        <button type="button" class="btn btn-xs btn-white" :class="narratorType === 2 ? 'active' : ''" @click="narratorInit(2)">月</button>
                                        <button type="button" class="btn btn-xs btn-white" :class="narratorType === 3 ? 'active' : ''" @click="narratorInit(3)">年</button>
                                    </div>
                                    <div class="time-group" :class="narratorType === 1 ? 'u_show' : ''">
                                        日期：
                                        <select v-model="narratorTime.year">
                                            <option v-for="(item,i) in years" :key="i" :value="item">{{item}}年</option>
                                        </select>
                                        <select v-model="narratorTime.month" @change="narratorInit(1)">
                                            <option v-for="i in 12" :key="i" :value="i" :selected="i == 1 ? true : false">{{i}}月</option>
                                        </select>
                                    </div>
                                    <div class="time-group" :class="narratorType === 2 ? 'u_show' : ''">
                                        日期：
                                        <select v-model="narratorTime.year" @change="narratorInit(2)">
                                            <option v-for="(item,i) in years" :key="i" :value="item">{{item}}年</option>
                                        </select>
                                    </div>
                                    <div class="time-group" :class="narratorType === 3 ? 'u_show' : ''">
                                        日期：
                                        <select v-model="narratorTime.start_year">
                                            <option v-for="(item,i) in years" :value="item" :key="i">{{item}}年</option>
                                            
                                        </select>
                                        ~
                                        <select v-model="narratorTime.end_year" @change="narratorInit(3)">
                                            <option v-for="(item,i) in years" :value="item" :key="i">{{item}}年</option>
                                            
                                        </select>
                                    </div>
                                    <div class="btn-group">
                                        <!-- <button type="button" class="btn btn-xs btn-white" title="搜索">
                                            <i class="glyphicon glyphicon-search cus"></i>
                                        </button> -->
                                        <button type="button" class="btn btn-xs btn-white" title="导出数据" @click="导出表格(2)">
                                            <i class="glyphicon glyphicon-floppy-save"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-lg-9 mt20">
                                        <div class="flot-chart">
                                            <small>讲解批次</small>
                                            <div class="flot-chart-content" id="ct-chart3"></div>
                                            <div class="u_tooltip" v-show="showToolTip">
                                                <p>正门：{{toolTipData.zm}}</p>
                                                <p>东门：{{toolTipData.dm}}</p>
                                                <p>北门：{{toolTipData.bm}}</p>
                                                <p>南门：{{toolTipData.nm}}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 mt20">
                                        <small>讲解批次占比</small>
                                        <div class="row">
                                            <div class="col-md-5">
                                                <div class="flot-chart-content" id="ct-chart5"></div>
                                            </div>
                                            <div class="col-md-5">
                                                <ul class="star-list">
                                                    <li>
                                                        <i class="glyphicon glyphicon-stop nm_color"></i>
                                                        南门：{{(Math.round(narratorData.south_gat / narratorData.sum * 100) || '0' ) + '%，' + narratorData.south_gat}}
                                                    </li>
                                                    <li>
                                                        <i class="glyphicon glyphicon-stop bm_color"></i>
                                                        北门：{{(Math.round(narratorData.north_gat / narratorData.sum * 100) || '0')  + '%，' + narratorData.north_gat}}
                                                    </li>
                                                    <li>
                                                        <i class="glyphicon glyphicon-stop dm_color"></i>
                                                        东门：{{(Math.round(narratorData.east_gat / narratorData.sum * 100) || '0' ) + '%，' + narratorData.east_gat}}
                                                    </li>
                                                    <li>
                                                        <i class="glyphicon glyphicon-stop zm_color"></i>
                                                        正门：{{(
                                                            (100 - (Math.round(narratorData.south_gat / narratorData.sum * 100)) - 
                                                            (Math.round(narratorData.north_gat / narratorData.sum * 100)) -
                                                            (Math.round(narratorData.east_gat / narratorData.sum * 100))) || '0')
                                                            + '%，' + narratorData.main_gat}}
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="display: none">
                            <table id="table2">
                                <thead>
                                    <tr>
                                        <th>日期</th>
                                        <th>南门（次）</th>
                                        <th>北门（次）</th>
                                        <th>东门（次）</th>
                                        <th>正门（次）</th>
                                    </tr>
                                    <tbody>
                                        <tr v-for="(item,i) in narratorTableData.south_gat">
                                            <td class="active" v-if="narratorType == 1">{{narratorTableData.date + (i + 1) + '日'}}</td>
                                            <td class="active" v-if="narratorType == 2">{{narratorTableData.date + (i + 1) + '月'}}</td>
                                            <td class="active" v-if="narratorType == 3">{{(narratorTableData.date + i) + '年'}}</td>
                                            <td class="success">{{narratorTableData.south_gat[i]}}</td>
                                            <td class="success">{{narratorTableData.north_gat[i]}}</td>
                                            <td class="success">{{narratorTableData.east_gat[i]}}</td>
                                            <td class="success">{{narratorTableData.main_gat[i]}}</td>
                                        </tr>
                                    </tbody>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="charts-box row" v-if="menuConfig('停车统计图表')">
                    <div class="col-lg-12">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>停车统计</h5>
                                <div class="pull-right">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-xs btn-white" :class="parkType === 1 ? 'active' : ''" @click="parkInit(1)">北门</button>
                                        <button type="button" class="btn btn-xs btn-white" :class="parkType === 2 ? 'active' : ''" @click="parkInit(2)">南门</button>
                                        <button type="button" class="btn btn-xs btn-white" :class="parkType === 3 ? 'active' : ''" @click="parkInit(3)">综合</button>
                                    </div>
                                    <div class="time-group" :class="narratorType === 1 ? 'u_show' : ''">
                                        日期：
                                        <select v-model="parkDate.year">
                                            <option v-for="(item,i) in years" :key="i" :value="item">{{item}}年</option>
                                        </select>
                                        <select @change="monthChange" v-model="parkDate.month">
                                            <option v-for="i in 12" :key="i" :value="i">{{i}}月</option>
                                        </select>

                                        <select v-model="parkDate.day">
                                            <option v-for="i in parkDate.dayNum" :key="i" :value="i">{{i < 10 ? '0' + i : i}}日</option>
                                        </select>
                                    </div>
                                    <div class="btn-group">
                                        <!-- <button type="button" class="btn btn-xs btn-white" title="搜索">
                                            <i class="glyphicon glyphicon-search cus"></i>
                                        </button> -->
                                        <button type="button" class="btn btn-xs btn-white" title="导出数据" @click="导出表格(3)">
                                            <i class="glyphicon glyphicon-floppy-save"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-lg-9 mt20">
                                        <div class="flot-chart">
                                            <small>24小时停车数量变化</small>
                                            <canvas class="flot-chart-content" id="ct-chart6" height="200px"></canvas>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 mt20">
                                        <small>24小时累计停车次数占比</small>
                                        <canvas class="flot-chart-content" id="ct-chart7" height="200"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="display: none">
                            <table id="table3">
                                <thead>
                                    <tr>
                                        <th>日期</th>
                                        <th>南门（停车数,空位数）</th>
                                        <th>北门（停车数,空位数）</th>
                                    </tr>
                                    <tbody>
                                        <tr v-for="(item,i) in parkTableData.south_gat">
                                            <td class="active">{{timeFormat('yyyy年MM月dd日',parkTableData.date) + ' ' + parkTableData.south_gat[i][0]}}</td>
                                            <td class="success">{{parkTableData.south_gat[i][1] + ',' + parkTableData.south_gat[i][2]}}</td>
                                            <td class="success">{{parkTableData.north_gat[i][1] + ',' + parkTableData.north_gat[i][2]}}</td>
                                        </tr>
                                    </tbody>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- 志愿者统计 -->
                <div class="charts-box row"  v-if="menuConfig('志愿者统计图表')">
                    <div class="col-lg-12">
                        <div class="ibox float-e-margins">
                            <div class="loading-box" v-show="volunteerLoading">
                                <img src="static/img/loading.gif" alt="">
                            </div>
                            <div class="ibox-title">
                                <h5>志愿者统计</h5>
                                <div class="pull-right">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-xs btn-white" :class="volunteerType === 1 ? 'active' : ''" @click="volunteerInit(1)">月</button>
                                        <button type="button" class="btn btn-xs btn-white" :class="volunteerType === 2 ? 'active' : ''" @click="volunteerInit(2)">年</button>
                                    </div>
                                    <div class="time-group" :class="volunteerType === 1 ? 'u_show' : ''">
                                        日期：
                                        <select v-model="volunteerTime.year" @change="volunteerInit(1)">
                                            <option v-for="(item,i) in years" :key="i" :value="item">{{item}}年</option>
                                        </select>
                                    </div>
                                    <div class="time-group" :class="volunteerType === 2 ? 'u_show' : ''">
                                        日期：
                                        <select v-model="volunteerTime.start_year">
                                            <option v-for="(item,i) in years" :value="item" :key="i">{{item}}年</option>
                                        </select>
                                        ~
                                        <select v-model="volunteerTime.end_year" @change="volunteerInit(2)">
                                            <option v-for="(item,i) in years" :value="item" :key="i">{{item}}年</option>
                                            
                                        </select>
                                    </div>
                                    <div class="btn-group">
                                        <!-- <button type="button" class="btn btn-xs btn-white" title="搜索">
                                                <i class="glyphicon glyphicon-search cus"></i>
                                        </button> -->
                                        <button type="button" class="btn btn-xs btn-white" title="导出数据" @click="导出表格(4)">
                                            <i class="glyphicon glyphicon-floppy-save"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-lg-6 mt20">
                                        <div class="flot-chart">
                                            <small>志愿者人数</small>
                                            <div class="flot-chart-content" id="flot-chart8"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 mt20">
                                        <div class="flot-chart">
                                            <small>活动次数</small>
                                            <div class="flot-chart-content" id="flot-chart9"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="display: none">
                        <table id="table4">
                            <thead>
                                <tr>
                                    <th>日期</th>
                                    <th>志愿者人数</th>
                                    <th>活动次数</th>
                                </tr>
                                <tbody>
                                    <tr v-for="(item,i) in volunteerTableData.number_list">
                                        <td class="active" v-if="volunteerType == 1">{{volunteerTableData.date + '年' + volunteerTableData.number_list[i][0] +'月'}}</td>
                                        <td class="active" v-if="volunteerType == 2">{{volunteerTableData.number_list[i][0] + '年'}}</td>
                                        <td class="success">{{volunteerTableData.number_list[i][1]}}</td>
                                        <td class="success">{{volunteerTableData.time_list[i][1]}}</td>
                                    </tr>
                                </tbody>
                            </thead>
                        </table>
                    </div>
                </div>

                <!-- 新增图表 -->
                <div class="charts-box row"  v-if="menuConfig(item.title)" v-for="(item,i) in newChartListType1.chartType1" :key="i">
                    <div class="col-lg-12">
                        <div class="ibox float-e-margins">
                            <!-- <div class="loading-box" v-show="volunteerLoading">
                                <img src="static/img/loading.gif" alt="">
                            </div> -->
                            <div class="ibox-title">
                                <h5>{{item.title}}</h5>
                                <div class="pull-right">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-xs btn-white" :class="volunteerType === 1 ? 'active' : ''" @click="newChartInit(1)">月</button>
                                        <button type="button" class="btn btn-xs btn-white" :class="volunteerType === 2 ? 'active' : ''" @click="newChartInit(2)">年</button>
                                    </div>
                                    <div class="time-group" :class="volunteerType === 1 ? 'u_show' : ''">
                                        日期：
                                        <select>
                                            <option v-for="(item,i) in years" :key="i" :value="item">{{item}}年</option>
                                        </select>
                                    </div>
                                    <div class="time-group" :class="volunteerType === 2 ? 'u_show' : ''">
                                        日期：
                                        <select>
                                            <option v-for="(item,i) in years" :value="item" :key="i">{{item}}年</option>
                                        </select>
                                        ~
                                        <select>
                                            <option v-for="(item,i) in years" :value="item" :key="i">{{item}}年</option>
                                            
                                        </select>
                                    </div>
                                    <div class="btn-group">
                                        <!-- <button type="button" class="btn btn-xs btn-white" title="搜索">
                                                <i class="glyphicon glyphicon-search cus"></i>
                                        </button> -->
                                        <!-- <button type="button" class="btn btn-xs btn-white" title="导出数据" @click="导出表格(4)">
                                            <i class="glyphicon glyphicon-floppy-save"></i>
                                        </button> -->
                                    </div>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-lg-9 mt20">
                                        <div class="flot-chart">
                                            <small>{{item.yName.split(',')[0]}}</small>
                                            <div class="flot-chart-content" :id="'newChartLeft'+item.id"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 mt20">
                                        <div class="flot-chart">
                                            <small>{{item.yName.split(',')[1]}}</small>
                                            <div class="flot-chart-content" :id="'newChartRight'+item.id"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="charts-box row"  v-if="menuConfig(item.title)" v-for="(item,i) in newChartListType1.chartType2" :key="i">
                    <div class="col-lg-12">
                        <div class="ibox float-e-margins">
                            <!-- <div class="loading-box" v-show="volunteerLoading">
                                <img src="static/img/loading.gif" alt="">
                            </div> -->
                            <div class="ibox-title">
                                <h5>{{item.title}}</h5>
                                <div class="pull-right">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-xs btn-white" :class="volunteerType === 1 ? 'active' : ''" @click="newChartInit(1)">月</button>
                                        <button type="button" class="btn btn-xs btn-white" :class="volunteerType === 2 ? 'active' : ''" @click="newChartInit(2)">年</button>
                                    </div>
                                    <div class="time-group" :class="volunteerType === 1 ? 'u_show' : ''">
                                        日期：
                                        <select>
                                            <option v-for="(item,i) in years" :key="i" :value="item">{{item}}年</option>
                                        </select>
                                    </div>
                                    <div class="time-group" :class="volunteerType === 2 ? 'u_show' : ''">
                                        日期：
                                        <select>
                                            <option v-for="(item,i) in years" :value="item" :key="i">{{item}}年</option>
                                        </select>
                                        ~
                                        <select>
                                            <option v-for="(item,i) in years" :value="item" :key="i">{{item}}年</option>
                                            
                                        </select>
                                    </div>
                                    <div class="btn-group">
                                        <!-- <button type="button" class="btn btn-xs btn-white" title="搜索">
                                                <i class="glyphicon glyphicon-search cus"></i>
                                        </button> -->
                                        <!-- <button type="button" class="btn btn-xs btn-white" title="导出数据" @click="导出表格(4)">
                                            <i class="glyphicon glyphicon-floppy-save"></i>
                                        </button> -->
                                    </div>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-lg-9 mt20">
                                        <div class="flot-chart">
                                            <small>{{item.yName.split(',')[0]}}</small>
                                            <div class="flot-chart-content" :id="'newChartLeft'+item.id"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 mt20">
                                        <div class="flot-chart">
                                            <small>{{item.yName.split(',')[1]}}</small>
                                            <div class="flot-chart-content" :id="'newChartRight'+item.id"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="charts-box row"  v-if="menuConfig(item.title)" v-for="(item,i) in newChartListType2.chartType1" :key="i">
                    <div class="col-lg-12">
                        <div class="ibox float-e-margins">
                            <!-- <div class="loading-box" v-show="volunteerLoading">
                                <img src="static/img/loading.gif" alt="">
                            </div> -->
                            <div class="ibox-title">
                                <h5>{{item.title}}</h5>
                                <div class="pull-right">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-xs btn-white" :class="volunteerType === 1 ? 'active' : ''" @click="newChartInit(1)">月</button>
                                        <button type="button" class="btn btn-xs btn-white" :class="volunteerType === 2 ? 'active' : ''" @click="newChartInit(2)">年</button>
                                    </div>
                                    <div class="time-group" :class="volunteerType === 1 ? 'u_show' : ''">
                                        日期：
                                        <select>
                                            <option v-for="(item,i) in years" :key="i" :value="item">{{item}}年</option>
                                        </select>
                                    </div>
                                    <div class="time-group" :class="volunteerType === 2 ? 'u_show' : ''">
                                        日期：
                                        <select>
                                            <option v-for="(item,i) in years" :value="item" :key="i">{{item}}年</option>
                                        </select>
                                        ~
                                        <select>
                                            <option v-for="(item,i) in years" :value="item" :key="i">{{item}}年</option>
                                            
                                        </select>
                                    </div>
                                    <div class="btn-group">
                                        <!-- <button type="button" class="btn btn-xs btn-white" title="搜索">
                                                <i class="glyphicon glyphicon-search cus"></i>
                                        </button> -->
                                        <!-- <button type="button" class="btn btn-xs btn-white" title="导出数据" @click="导出表格(4)">
                                            <i class="glyphicon glyphicon-floppy-save"></i>
                                        </button> -->
                                    </div>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-lg-6 mt20">
                                        <div class="flot-chart">
                                            <small>{{item.yName.split(',')[0]}}</small>
                                            <div class="flot-chart-content" :id="'newChartLeft'+item.id"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 mt20">
                                        <div class="flot-chart">
                                            <small>{{item.yName.split(',')[1]}}</small>
                                            <div class="flot-chart-content" :id="'newChartRight'+item.id"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="charts-box row"  v-if="menuConfig(item.title)" v-for="(item,i) in newChartListType2.chartType2" :key="i">
                    <div class="col-lg-12">
                        <div class="ibox float-e-margins">
                            <!-- <div class="loading-box" v-show="volunteerLoading">
                                <img src="static/img/loading.gif" alt="">
                            </div> -->
                            <div class="ibox-title">
                                <h5>{{item.title}}</h5>
                                <div class="pull-right">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-xs btn-white" :class="volunteerType === 1 ? 'active' : ''" @click="newChartInit(1)">月</button>
                                        <button type="button" class="btn btn-xs btn-white" :class="volunteerType === 2 ? 'active' : ''" @click="newChartInit(2)">年</button>
                                    </div>
                                    <div class="time-group" :class="volunteerType === 1 ? 'u_show' : ''">
                                        日期：
                                        <select>
                                            <option v-for="(item,i) in years" :key="i" :value="item">{{item}}年</option>
                                        </select>
                                    </div>
                                    <div class="time-group" :class="volunteerType === 2 ? 'u_show' : ''">
                                        日期：
                                        <select>
                                            <option v-for="(item,i) in years" :value="item" :key="i">{{item}}年</option>
                                        </select>
                                        ~
                                        <select>
                                            <option v-for="(item,i) in years" :value="item" :key="i">{{item}}年</option>
                                            
                                        </select>
                                    </div>
                                    <div class="btn-group">
                                        <!-- <button type="button" class="btn btn-xs btn-white" title="搜索">
                                                <i class="glyphicon glyphicon-search cus"></i>
                                        </button> -->
                                        <!-- <button type="button" class="btn btn-xs btn-white" title="导出数据" @click="导出表格(4)">
                                            <i class="glyphicon glyphicon-floppy-save"></i>
                                        </button> -->
                                    </div>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-lg-6 mt20">
                                        <div class="flot-chart">
                                            <small>{{item.yName.split(',')[0]}}</small>
                                            <div class="flot-chart-content" :id="'newChartLeft'+item.id"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 mt20">
                                        <div class="flot-chart">
                                            <small>{{item.yName.split(',')[1]}}</small>
                                            <div class="flot-chart-content" :id="'newChartRight'+item.id"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 新增按钮 -->
                <div class="add-charts">
                    <a class="border cus" href="./addChart.html">
                        <span>+&nbsp;新增</span>
                    </a>
                </div>
            </div>

            <div class="big-box" v-show="tabCurrent == 2">
                <div class="u_input_box">
                    <form class="form-inline">
                        <div class="form-group">
                            <label for="exampleInputName2">添加数据源地址</label>
                            <input type="text" class="form-control" id="exampleInputName2" v-model="form.url">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputName2">数据源名称</label>
                            <input type="text" class="form-control" id="exampleInputName2" v-model="form.name">
                        </div>
                        <div class="btn btn-default" @click="addUrl">立即添加</div>
                    </form>
                    <!-- </div> -->
                </div>
                <div id="video"></div>
                <div class="playing_box">
                    <p style="line-height: 50px;">正在播放：{{playing.name || '暂无数据源，请添加'}}</p>
                    <ul class="list_box" v-if="urls.length > 0">
                        <li v-show="!editShow" class="list_one" title="搜索" :class="playing.name == item.name ? 'current' : ''" v-for="(item,i) in urls" :key="i" @click="cutVideo(item)">{{item.name}}</li>
                        <li v-show="editShow" class="list_one edit" title="点击删除" v-for="(item,i) in urls" :key="i" @click="delUrl(item)">{{item.name}} <span class="glyphicon glyphicon-remove"></span></li>
                        <li v-show="!editShow" class="list_one editBtn" @click="edit">编辑</li>
                        <li v-show="editShow" class="list_one editBtn" @click="saveUrl">完成</li>
                        <li class="list_one editBtn" @click="openAllVideo">视频墙模式</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer">
            Copyright 成都杜甫草堂博物馆
        </div>
        <!-- 加载动画 -->
        <div class="loading" v-show="!complete">
            <div class="spinner">
                <div class="spinner-container container1">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
                <div class="spinner-container container2">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
                <div class="spinner-container container3">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="./static/js/jquery-3.3.1.min.js"></script>
    <script src="./static/js/bootstrap.js"></script>
    <!-- Flot -->
    <script src="./static/js/plugins/flot/jquery.flot.js"></script>
    <script src="./static/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="./static/js/plugins/flot/jquery.flot.spline.js"></script>
    <script src="./static/js/plugins/flot/jquery.flot.resize.js"></script>
    <script src="./static/js/plugins/flot/jquery.flot.pie.js"></script>
    <script src="./static/js/plugins/flot/jquery.flot.symbol.js"></script>
    <script src="./static/js/plugins/flot/jquery.flot.time.js"></script>

    <!-- Jvectormap -->
    <script src="./static/js/plugins/jvectormap/jquery-jvectormap-2.0.2.min.js"></script>
    <script src="./static/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>

    <script src="./static/js/jquery.easypiechart.js"></script>
    <script src="./static/js/plugins/chartist/chartist.min.js"></script>
    <!-- <script src="./static/js/plugins/chartJs/Chart.min.js"></script> -->
    <!-- <script src="//s.nodejs.cn/chart/assets/Chart.min.js"></script> -->
    <script src="./static/js/Chart.min.js"></script>
    <script src="./static/js/vue.min.js"></script>
    <script src="./static/js/axios.min.js"></script>
    <script src="./static/api/api.js"></script>
    <script src="./static/js/chartOptions.js"></script>
    <script src="./static/js/prism.js"></script>
    <script src="./static/js/spop.min.js"></script>
    <script src="./static/js/jszip.min.js"></script>
    <script src="./static/js/FileSaver.js"></script>
    <script src="./static/js/excel-gen.js"></script>
	
    <script src="./static/ckplayer/ckplayer.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
		var videoObject = {
			container: '#video', //容器的ID或className
			variable: 'player', //播放函数名称
			autoplay: true,//是否自动播放
			// video: 'rtmp://live.hkstv.hk.lxdns.com/live/hks1'
		};
		var player = new ckplayer(videoObject);
		
	
		window.newVideo = function newVideo(url) {
			// var videoUrl = player.getByElement('.videourl').value;
			var videoUrl = url
			changeVideo(videoUrl);
		}
	
		function changeVideo(videoUrl) {
			if(player == null) {
				return;
			}
	
			var newVideoObject = {
				container: '#video', //容器的ID
				variable: 'player',
				autoplay: true, //是否自动播放
				// loaded: 'loadedHandler', //当播放器加载后执行的函数
				video: videoUrl
			}
			//判断是需要重新加载播放器还是直接换新地址
	
			if(player.playerType == 'html5video') {
				if(player.getFileExt(videoUrl) == '.flv' || player.getFileExt(videoUrl) == '.m3u8' || player.getFileExt(videoUrl) == '.f4v' || videoUrl.substr(0, 4) == 'rtmp') {
					player.removeChild();
	
					player = null;
					player = new ckplayer();
					player.embed(newVideoObject);
				} else {
					player.newVideo(newVideoObject);
				}
			} else {
				if(player.getFileExt(videoUrl) == '.mp4' || player.getFileExt(videoUrl) == '.webm' || player.getFileExt(videoUrl) == '.ogg') {
					player = null;
					player = new ckplayer();
					player.embed(newVideoObject);
				} else {
					player.newVideo(newVideoObject);
				}
			}
        }
	</script>
    <script>
        let tabs = {
            1: '图表展示',
            2: '监控展示'
        };
        var statistical = new Vue({
            el: '#statistical',
            data() {
                return {
                    complete: true,
                    tabs: tabs,
                    tabCurrent: 1,
                    roles: store.fetch('userLoginInfo').roles,
                    time: this.timeFormat('hh:mm'),
                    date: this.timeFormat('yyyy年MM月dd日'),
                    week: this.timeFormat('D'),
                    baseUrl: api.baseUrl,
                    userData: store.fetch('userLoginInfo'),
                    mouseX: 0,
                    mouseY: 0,
                    toDayData: {
                        commentatorNum: 0,
                        serviceNum: 0
                    },
                    showToolTip: false,
                    toolTipData: {
                        nm: '0',
                        bm: '0',
                        dm: '0',
                        zm: '0'
                    },
                    tickType: 1,//1：日，2：月，3：年
                    narratorType: 1,//1：日，2：月，3：年
                    narratorData: {
                        south_gat: 0,
                        north_gat: 0,
                        east_gat: 0,
                        main_gat: 0,
                        sum: 0
                    },
                    parkType: 1,//1：北门，2：南门，3：综合
                    parkDate: {
                        year: this.timeFormat('yyyy',new Date()) - 1,
                        month: '1',
                        day: '1',
                        dayNum: 31
                    },
                    volunteerType: 1,//1：月，2：年
                    videoUrl: '',
                    playing: '',
                    urls: [],
                    form: {
                        url: '',
                        name: ''
                    },
                    editShow: false,
                    //---------导出数据--------
                    tickAllData: null,
                    narratorAllData: null,
                    parkAllData: null,
                    volunteerAllData: null,
                    tickTableData: {
                        activationData: [],
                        soldData: []
                    },
                    narratorTableData: {
                        south_gat: [],
                        north_gat: [],
                        east_gat: [],
                        main_gat: [],
                        date: ''
                    },
                    parkTableData: {
                        south_gat: [],
                        north_gat: [],
                        date: ''
                    },
                    volunteerTableData: {
                        number_list: [],
                        time_list: [],
                        date: ''
                    },
                    years: [],
                    //--------讲解员统计时间------
                    narratorLoading: false,
                    narratorTime: {
                        year: this.timeFormat('yyyy'),
                        month: this.timeFormat('M'),
                        time: this.timeFormat('yyyy-MM-dd'),
                        start_year: this.timeFormat('yyyy') - 4,
                        end_year: this.timeFormat('yyyy'),
                    },
                    //志愿者统计时间
                    volunteerLoading: false,
                    volunteerTime: {
                        year: this.timeFormat('yyyy'),
                        start_year: this.timeFormat('yyyy') - 3,
                        end_year: this.timeFormat('yyyy')
                    },
                    //新增图表数据
                    newChartListType1: {
                        chartType1: [],
                        chartType2: []
                    },
                    newChartListType2: {
                        chartType1: [],
                        chartType2: []
                    }
                }
            },
            created() {

            },
            mounted() {
                this.getDate();
                this.ticketInit(1);
                this.narratorInit(1);
                this.parkInit(1);
                this.volunteerInit(1);
                this.getYears();
                // this.videoInit()
                this.getNewChart();
                this.getTodayData();
            },
            methods: {
                //时间格式化
                timeFormat(fmt,time=false) {
                    if(time) {
                        var date = new Date(time)
                    }else {
                        var date = new Date();
                    }
                    let week = {
                        0: '日',
                        1: '一',
                        2: '二',
                        3: '三',
                        4: '四',
                        5: '五',
                        6: '六'
                    }
                    var o = { 
                        "M+" : date.getMonth()+1,     //月份 
                        "d+" : date.getDate(),     //日 
                        "h+" : date.getHours(),     //小时 
                        "m+" : date.getMinutes(),     //分 
                        "s+" : date.getSeconds(),     //秒 
                        "q+" : Math.floor((date.getMonth()+3)/3), //季度 
                        "S" : date.getMilliseconds(),    //毫秒
                        "D" : week[date.getDay()]
                    }; 
                    if(/(y+)/.test(fmt)) 
                    fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length)); 
                    for(var k in o) 
                    if(new RegExp("("+ k +")").test(fmt)) 
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); 
                    return fmt;
                },

                getYears() {
                    let now = this.timeFormat('yyyy');
                    for (let index = 0; index < 10; index++) {
                        this.years.push(now-index);
                    }
                },

                //动态获取时间、
                getDate() {
                    setInterval(() => {
                        this.time = this.timeFormat('hh:mm');
                        this.date = this.timeFormat('yyyy年MM月dd日');
                        this.week = this.timeFormat('D')
                    },1000)
                },

                //获取鼠标位置
                getMouse(event) {
                    let e = event || window.event;
                    this.mouseX = e.clientX + 20;
                    this.mouseY = e.clientY + 15;
                },

                monthChange() {
                    this.parkDate.dayNum = new Date(this.parkDate.year,this.parkDate.month, 0).getDate()
                },

                //提示通知
                通知(title,msg,type) {
                    spop({
                        template: '<h4 class="spop-title">'+title+'</h4>'+msg,
                        style: type,
                        autoclose: 3000
                    });
                },

                //登出
                logout() {
                    store.clear('userLoginInfo');
                    store.clear('userData');
                    window.location.href = '/login.html'
                },
                //权限判断
                menuConfig(menuName) {
                    let re = new RegExp(menuName);
                    if(re.test(this.roles)) {
                        let roleArr = this.roles.split(',');
                        let status = false;
                        for (const item of roleArr) {
                            if(menuName == item) {
                                status = true
                            }
                        }
                        return status;
                    }else {
                        return false;
                    }
                },
                tabClick(i) {
                    this.tabCurrent = i;
                    // this.complete = false;
                    if(i === 2) {
                        this.getVideoList()
                    }
                    
                },
                //-----------------------------综合统计-------------------------
                getTodayData() {
                    let _vm = this;
                    api.getCommentatorTime().then(res => {
                        _vm.toDayData.commentatorNum = res.data.data;
                    })
                    api.getServiceNum().then(res => {
                        _vm.toDayData.serviceNum = res.data.data;
                    })
                },

                //------------------------------票务统计-------------------------
                ticketInit(type) {
                    var _vm = this;
                    _vm.tickType = type;
                    var getTimeFn = (obj,type) => {
                        for (const i in obj) {
                            let y = obj[i][0].split(',')[0];
                            let m = obj[i][0].split(',')[1];
                            let d = obj[i][0].split(',')[2];
                            if(type === 1) {
                                obj[i][0] = gd(y,m,d);
                                this.tickTableData = this.tickAllData.dayData;
                            }
                            else if(type === 2) {
                                obj[i][0] = gm(y,m,d);
                                this.tickTableData = this.tickAllData.monthData;
                            }
                            else if(type === 3) {
                                obj[i][0] = gy(y,m,d);
                                this.tickTableData = this.tickAllData.yearData
                            }
                        }
                        return obj;
                    };
                    api.getTickData().then(res => {
                        let tickData = res.data;
                        this.tickAllData = res.data;
                        let dayData = tickData.dayData;
                        let monthData = tickData.monthData;
                        let yearData = tickData.yearData;
                        if(type === 1) {
                            let activationData = getTimeFn(dayData.activationData,type);
                            let soldData = getTimeFn(dayData.soldData,type);
                            dataset[0].data = soldData;//核销数据
                            dataset[1].data = activationData;//激活数据
                            dataset[0].bars.lineWidth = 1;
                            dataset[0].bars.barWidth = 24 * 60 * 60 * 600;
                            options.xaxis.tickSize = [3, 'day'];
                        }else if(type === 2) {
                            let activationData = getTimeFn(monthData.activationData,type);
                            let soldData = getTimeFn(monthData.soldData,type);
                            dataset[0].data = soldData;//核销数据
                            dataset[1].data = activationData;//激活数据
                            dataset[0].bars.lineWidth = 1;
                            dataset[0].bars.barWidth = 24 * 60 * 60 * 6000;
                            options.xaxis.tickSize = [1, 'month'];
                        }else if(type === 3) {
                            let activationData = getTimeFn(yearData.activationData,type);
                            let soldData = getTimeFn(yearData.soldData,type);
                            dataset[0].data = soldData;//核销数据
                            dataset[1].data = activationData;//激活数据
                            dataset[0].bars.lineWidth = 1;
                            dataset[0].bars.barWidth = 24 * 60 * 60 * 60000;
                            options.xaxis.tickSize = [1, 'year'];
                        };
                        options.tooltip = true;
                        options.tooltipOpts = {
                            content: "%y"
                        }
                        options.grid = {
                            hoverable: true,
                            show: true,
                            borderWidth: 0
                        }
                        $.plot($("#flot-dashboard-chart"), dataset, options);
                        // $('#flot-dashboard-chart').bind("plothover",(event,pos,item) => {
                        //     if(item) {
                        //         // console.log('=============>',item)
                        //         var x = item.datapoint[0].toFixed(2);
                        //         y = item.datapoint[1];
                        //         var buf = x;
                        //         console.log(item)
                        //     }
                        // })
                    }).catch(err => {
                        console.error(err)
                    });
                },

                //-----------------------------讲解员统计-----------------------------------
                narratorInit(type) {
                    let _vm = this;
                    _vm.narratorType = type;
                    narratorOption1.series = [];
                    _vm.narratorLoading = true;
                    let body = {
                        time: this.narratorTime.year + '-' + ( this.narratorTime.month > 9 ? this.narratorTime.month : ('0' + this.narratorTime.month) ) + '-' + '01',
                        year: this.narratorTime.year,
                        start_year: this.narratorTime.start_year,
                        end_year: this.narratorTime.end_year
                    }
                    api.getNarratorData(body).then(res => {
                        _vm.narratorLoading = false;
                        let narratorData = res.data.data.data
                        this.narratorAllData = res.data.data.data;
                        // debugger
                        if(type === 1) {
                            this.narratorTableData = this.narratorAllData.dayData.list;
                            this.narratorTableData.date = '2018年' + this.narratorAllData.dayData.month + '月';
                        }
                        if(type === 2) {
                            this.narratorTableData = this.narratorAllData.monthData.list;
                            this.narratorTableData.date = this.narratorAllData.monthData.year + '年';
                        }
                        if(type === 3) {
                            this.narratorTableData = this.narratorAllData.yearData.list;
                            this.narratorTableData.date = this.narratorAllData.yearData.interval[0];
                        }
                        let dayData = narratorData.dayData;
                        let monthData = narratorData.monthData;
                        let yearData = narratorData.yearData;
                        // 讲解批次条形图
                        var getSum = (data) => {
                            let sum = 0;
                            for (const i of data) {
                                sum += i;
                            }
                            return sum;
                        }
                        //讲解批次条形图
                        type === 1 ? setNarratorFn(dayData.list,type) : type === 2 ? setNarratorFn(monthData.list,type) : setNarratorFn(yearData.list,type,yearData.interval);
                        var $chart = $('#ct-chart3');
                        $chart.on('mousemove', function(event) {
                            if(event.target.getAttribute('ct:value')) {
                                let item = event.target;
                                let parent = event.target.parentNode;
                                let lists = Array.from(parent.querySelectorAll('line'));
                                let index = lists.indexOf(item);
                                let css = {
                                    top: _vm.mouseY + 'px',
                                    left: _vm.mouseX + 'px'
                                }
                                _vm.toolTipData = {
                                    zm: Array.from(document.querySelectorAll('.ct-series-d')[0].querySelectorAll('line'))[index].getAttribute('ct:value'),
                                    dm: Array.from(document.querySelectorAll('.ct-series-c')[0].querySelectorAll('line'))[index].getAttribute('ct:value'),
                                    bm: Array.from(document.querySelectorAll('.ct-series-b')[0].querySelectorAll('line'))[index].getAttribute('ct:value'),
                                    nm: Array.from(document.querySelectorAll('.ct-series-a')[0].querySelectorAll('line'))[index].getAttribute('ct:value'),
                                }
                                $('.u_tooltip').css(css);
                                _vm.showToolTip = true;
                            }else {
                                _vm.showToolTip = false;
                            }
                        });
                        console.log(_vm.narratorData)
                        //讲解批次占比 饼图
                        let narratorPieData = {
                            series: [_vm.narratorData.south_gat, _vm.narratorData.north_gat, _vm.narratorData.east_gat, _vm.narratorData.main_gat]
                        }
                        let sum = function(a, b) { return a + b };
                        let i = 0;
                        new Chartist.Pie('#ct-chart5', narratorPieData, {
                            labelInterpolationFnc: function(value) {
                                return ''
                            }
                        });
                        
                    }).catch(err => {
                        this.通知('错误','服务器开小差了，请稍后再试！','error');
                        console.error(err)
                    })
                },
                
                //------------------------------停车统计-------------------------------------
                parkInit(type) {
                    let _vm = this;
                    _vm.parkType = type;
                    api.getParkData().then(res => {
                        let parkData = res.data.data;
                        this.parkTableData.south_gat = parkData.list.south_gat;
                        this.parkTableData.north_gat = parkData.list.north_gat;
                        this.parkTableData.date = parkData.time;
                        if(type === 1) {
                            setParkFn(parkData.list.north_gat,parkData.list,type);
                        }else if(type === 2) {
                            setParkFn(parkData.list.south_gat,parkData.list,type);
                        }else if(type === 3) {
                            setParkFn(null,parkData.list,type)
                        }
                    })
                },

                //-----------------------------志愿者统计-------------------------------------
                volunteerInit(type) {
                    let _vm = this;
                    _vm.volunteerType = type;
                    _vm.volunteerLoading = true;
                    let body = {..._vm.volunteerTime}
                    api.getVolunteerData(body).then(res => {
                        _vm.volunteerLoading = false;
                        let volunteerData = res.data.data.data;
                        if (type === 1)  {
                            var data = volunteerData.monthData;
                        }else {
                            var data = volunteerData.yearData;
                        }
                        this.volunteerTableData.number_list = data.number_list;
                        this.volunteerTableData.time_list = data.time_list;
                        type === 1 ? this.volunteerTableData.date = data.year : this.volunteerTableData.date = data.interval[0];
                        type === 1 ? setVolunteerFn(volunteerData.monthData,type) : setVolunteerFn(volunteerData.yearData,type)
                    })
                },

                //新增图表
                getNewChart() {
                    let _vm = this;
                    api.getNewChartList().then(res => {
                        if(res.data.status == 'success') {
                            for (const item of res.data.data) {
                                if(item.type === '1' && item.chartType === '1') {
                                    if(_vm.menuConfig(item.title)){
                                        _vm.newChartListType1.chartType1.push(item)
                                    }
                                }
                                if(item.type === '1' && item.chartType === '2') {
                                    if(_vm.menuConfig(item.title)) _vm.newChartListType1.chartType2.push(item)
                                }
                                if(item.type === '2' && item.chartType === '1') {
                                    if(_vm.menuConfig(item.title)) _vm.newChartListType2.chartType1.push(item)
                                }
                                if(item.type === '2' && item.chartType === '2') {
                                    if(_vm.menuConfig(item.title)) _vm.newChartListType2.chartType2.push(item)
                                }
                            }
                            _vm.newChartInit()
                        }
                    })
                },

                //初始化新增图表
                newChartInit(type=1) {
                    let _vm = this;
                    for (const item of _vm.newChartListType1.chartType1) {
                        let id = item.id;
                        api.getNewChartData(item.url.split(',')[0],{}).then(res => {
                            let volunteerData = res.data.data;
                            if (type === 1)  {
                                var data = volunteerData.monthData;
                            }else {
                                var data = volunteerData.yearData;
                            }
                            this.volunteerTableData.number_list = data.number_list;
                            this.volunteerTableData.time_list = data.time_list;
                            type === 1 ? this.volunteerTableData.date = data.year : this.volunteerTableData.date = data.interval[0];
                            type === 1 ? setVolunteerFn(volunteerData.monthData,type,id) : setVolunteerFn(volunteerData.yearData,type,id)
                        })
                    }
                    for (const item of _vm.newChartListType2.chartType1) {
                        let id = item.id;
                        api.getNewChartData(item.url.split(',')[0],{}).then(res => {
                            let volunteerData = res.data.data;
                            if (type === 1)  {
                                var data = volunteerData.monthData;
                            }else {
                                var data = volunteerData.yearData;
                            }
                            this.volunteerTableData.number_list = data.number_list;
                            this.volunteerTableData.time_list = data.time_list;
                            type === 1 ? this.volunteerTableData.date = data.year : this.volunteerTableData.date = data.interval[0];
                            type === 1 ? setVolunteerFn(volunteerData.monthData,type,id) : setVolunteerFn(volunteerData.yearData,type,id)
                        })
                    }
                },

                //------------------------------导出数据----------------------
                导出表格(type) {
                    if(type === 1) {
                        let excel = new ExcelGen({
                            "src_id": 'table1',
                            "show_header": true,
                            "excel_name": '票务统计'
                        });
                        excel.generate();
                        let body = {
                            author: this.userData.userName,
                            moduleChileName: '图表展示',
                            moduleName: '统计分析',
                            operation: '下载票务统计数据'
                        }
                        this.recordLog(body)
                    }
                    if(type === 2) {
                        let excel = new ExcelGen({
                            "src_id": 'table2',
                            "show_header": true,
                            "excel_name": '讲解员统计'
                        });
                        excel.generate()
                        let body = {
                            author: this.userData.userName,
                            moduleChileName: '图表展示',
                            moduleName: '统计分析',
                            operation: '下载讲解员统计数据'
                        }
                        this.recordLog(body)
                    }
                    if(type === 3) {
                        let excel = new ExcelGen({
                            "src_id": 'table3',
                            "show_header": true,
                            "excel_name": '停车统计'
                        });
                        excel.generate()
                        let body = {
                            author: this.userData.userName,
                            moduleChileName: '图表展示',
                            moduleName: '统计分析',
                            operation: '下载停车统计数据'
                        }
                        this.recordLog(body)
                    }
                    if(type === 4) {
                        let excel = new ExcelGen({
                            "src_id": 'table4',
                            "show_header": true,
                            "excel_name": '志愿者统计'
                        });
                        excel.generate()
                        let body = {
                            author: this.userData.userName,
                            moduleChileName: '图表展示',
                            moduleName: '统计分析',
                            operation: '下载志愿者统计数据'
                        }
                        this.recordLog(body)
                    }
                },

                //------------------------------监控展示-------------------------------------
                //获取监控列表
                getVideoList() {
                    api.getVidedoList().then(res => {
                        if(res.data.status == 'success') {
                            this.urls = res.data.data;
                            if(this.urls.length > 0) {
                                this.cutVideo(this.urls[0])
                            }
                        }else {
                            this.通知('错误','获取数据源列表失败！','error');
                        }
                    })
                },

                //videoInit
                videoInit() {
                    let video = this.playing;
                    window.newVideo(video.url);
                },

                cutVideo(item) {
                    if(item.name != this.playing.name) {
                        this.playing = item;
                    }
                    this.videoInit()
                },

                addUrl() {
                    if(this.form.url && this.form.name) {
                        let body = this.form;
                        api.addVideo(body).then(res => {
                            if(res.data.status == 'success') {
                                this.通知('提示','添加成功！','success');
                                this.form = {
                                    url: '',
                                    name: ''
                                }
                                let body = {
                                    author: this.userData.userName,
                                    moduleChileName: '监控展示',
                                    moduleName: '统计分析',
                                    operation: '添加监控数据源'
                                }
                                this.recordLog(body)
                                this.getVideoList()
                            }else {
                                this.通知('错误','添加失败！','error');
                            }
                        }).catch(err => {
                            this.通知('错误','服务器开小差了，请稍后再试！','error');
                        })
                    }
                },

                edit() {
                    this.editShow = true;
                },

                delUrl(item) {
                    let body = {
                        id: item.id
                    }
                    api.delVideo(body).then(res => {
                        if(res.data.status == 'success') {
                            this.通知('提示','删除成功！','success');
                            this.getVideoList();
                            let body = {
                                author: this.userData.userName,
                                moduleChileName: '监控展示',
                                moduleName: '统计分析',
                                operation: '删除监控数据源'
                            }
                            this.recordLog(body)
                        }else {
                            this.通知('错误','删除失败！','error');
                        }
                    }).catch(err => {
                        this.通知('错误','服务器开小差了，请稍后再试！','error');
                    })
                },

                saveUrl() {
                    this.editShow = false;
                },

                openAllVideo() {
                    window.open('./videoWall.html');
                    this.tabClick(1)
                },

                recordLog(body,fn=false) {
                    api.updateLog(body).then(res => {
                        if(fn) {
                            let newFN = new Function(fn);
                            newFN();
                        }
                    }).catch(err => {
                        console.error(err)
                    })
                },
            }
        })
    </script>
</body>
</html>